<template>
  <div class="container">
    <div class="searchContainer">
      <div class="statusText">状态</div>
      <div style="float: left;width: 60%;">
        <label :for="index"
               v-for="(item, index) in statusOptions"
               :key="index"
               style="float: left;margin-right: 20px;line-height: 28px;">
          <input type="checkbox"
                 name=""
                 :id="index"
                 v-model="premisesSaleStatusList"
                 :value="item.value"
                 style="-webkit-appearance: checkbox;" />
          <span>{{item.label}}</span>
        </label>
      </div>
      <div style="width: 100%; position: absolute; top: 65px ; left: 0 ; bottom: 0;">
        <div class="statusText">查询</div>
        <input class="input"
               type="text"
               placeholder="请输入楼盘名称"
               v-model="searchName" />
      </div>
      <div class="searchButton"
           @click="searchList">
        搜索
      </div>
    </div>
    <!-- <div style="clear: both;"></div>
    <ul class="items-list">
      <li v-for="(item,index) in options"
          @click="checkedState(item)"
          :key="index">
        <span class="img"></span>
        <p class="text">{{item.name}}</p>
        <i class="checkIcon"
           :class="{'active':item.isShow}"></i>
        <input type="checkbox"
               class="mint-checkbox-input"
               v-model="item.isShow">
      </li>
    </ul> -->
    <ul class="items-list">
      <li v-for="(item,index) in options"
          :key="index">
        <span class="img"></span>
        <p class="text">{{item.name}}</p>
        <!-- <i class="checkIcon" :class="{'active':item.isShow}"></i> -->
        <input type="checkbox"
               v-model="premisesIdList"
               :value="item.id"
               class="premises-checkBox">
      </li>
    </ul>

    <div class="premises-bottom">
      <input type="checkbox"
             class="bottom-premises-checkbox"
             :value="1"
             v-model="allChecked">
      <span style="margin-left:5px; color:#e29153;">全选</span>
      <span style="margin-left:35px;">合计：{{premisesIdList.length}}个楼盘</span>
      <button style="position:fixed; right:20px; background-color:#e29153; width: 40px; border-radius: 10%; color:white"
              @click="checkedState">确认</button>
    </div>
  </div>
</template>
<script>
import { Toast, Checklist } from "mint-ui";
export default {
  components: {
    Checklist
  },
  data() {
    return {
      options: [],
      //   premisesId: window.localStorage.getItem("2_premisesId"),
      premisesIdList: window.localStorage.getItem("2_premisesIds")
        ? window.localStorage.getItem("2_premisesIds").split(",")
        : [-1],
      allCheckedChangeFlag: false,
      premisesChangeFlag: false,
      allPremisesIdList: [],
      premisesSaleStatusList: [],
      allChecked: [],
      searchName: "",
      statusOptions: [
        {
          label: "在售楼盘",
          value: "1"
        },
        {
          label: "待售楼盘",
          value: "0"
        },
        {
          label: "售罄楼盘",
          value: "2"
        },
        {
          label: "下架楼盘",
          value: "3"
        }
      ]
    };
  },
  mounted: function () {
    this.initPremisesList();
  },
  watch: {
    allChecked(val) {
      if (this.premisesChangeFlag) {
        this.premisesChangeFlag = false;
        return;
      }
      this.allCheckedChangeFlag = true;
      if (this.allChecked.length == 1) {
        this.premisesIdList = this.allPremisesIdList;
      } else if (this.allChecked.length == 0) {
        this.premisesIdList = [];
      }
    },
    premisesIdList(val) {
      if (this.allCheckedChangeFlag) {
        this.allCheckedChangeFlag = false;
        return;
      }
      this.premisesChangeFlag = true;
      if (this.premisesIdList.length == this.allPremisesIdList.length) {
        this.allChecked = [1];
      } else {
        this.allChecked = [];
      }
    }
  },
  methods: {
    searchList() {
      this.initPremisesList(true);
    },
    checkedState() {
      var premisesName = "";
      if (this.premisesIdList.length != 0) {
        outer: for (var i = 0; i < this.options.length; i++) {
          for (var k = 0; k < this.premisesIdList.length; k++) {
            if (this.options[i].id == this.premisesIdList[k]) {
              premisesName = this.options[i].name;
              break outer;
            }
          }
        }
        window.localStorage.setItem("2_premisesIds", this.premisesIdList);
        if (this.premisesIdList.length == 1) {
          window.localStorage.setItem(
            "2_premisesName",
            "已选择" + premisesName
          );
        } else if (
          this.premisesIdList.length == this.allPremisesIdList.length
        ) {
          window.localStorage.setItem("2_premisesName", "已选择全部楼盘");
        } else {
          window.localStorage.setItem(
            "2_premisesName",
            "已选择" +
              premisesName +
              "等" +
              this.premisesIdList.length +
              "个楼盘"
          );
        }
      } else {
        window.localStorage.setItem("2_premisesIds", [-1]);
        window.localStorage.setItem("2_premisesName", "未选择楼盘");
      }

      this.$router.push({ path: "/index" });
    },
    // premisesCheckboxChange() {
    //   var _self = this;
    //   console.log(_self.premisesIdList);
    // },
    initPremisesList(flag) {
      var _self = this;
      var body = {};
      body.params = {};
      if (flag && this.premisesSaleStatusList.length > 0) {
        body.params.premisesSaleStatusList = this.premisesSaleStatusList;
      }
      body.params.premisesName = this.searchName;
      var url = _self.utilHelper.apiUrl + "/api/getCaseMemberList";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        _self.options = [];
        if (body.result == 1) {
          var caseMemberList = body.resData.caseMemberList;
          var premisesIdList = window.localStorage.getItem("2_premisesIds")
            ? window.localStorage.getItem("2_premisesIds").split(",")
            : [-1];
          _self.premisesIdList = [];
          _self.allPremisesIdList = [];
          caseMemberList.forEach(function (item, index) {
            var optionObj = {};
            optionObj.id = caseMemberList[index].premisesId;
            optionObj.name = caseMemberList[index].premisesName;
            _self.allPremisesIdList.push(caseMemberList[index].premisesId);
            _self.options.push(optionObj);
          });
          if (premisesIdList) {
            premisesIdList.forEach(function (item, index) {
              if (
                _self.allPremisesIdList.includes(item) &&
                !_self.premisesIdList.includes(item)
              ) {
                _self.premisesIdList.push(item);
              }
            });
          }
          // 如果是已选择全部，则默认全部勾选。为了兼容历史的已选择全部
          if (
            window.localStorage.getItem("2_premisesName") == "已选择全部楼盘"
          ) {
            this.allChecked = [1];
            return;
          }
          var includeFlag =
            premisesIdList.length == 1 && premisesIdList.includes("-1");
          if (
            premisesIdList.length == caseMemberList.length &&
            caseMemberList.length != 0 &&
            !includeFlag
          ) {
            this.allChecked = [1];
          }
        } else {
          Toast({
            message: "数据获取失败",
            position: "middle",
            duration: 2000
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.searchContainer {
  background-color: #fff;
  position: fixed;
  height: 100px;
  z-index: 999;
  padding-top: 7px;
}
.statusText {
  width: 70px;
  float: left;
  color: #e29153;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.input {
  border-bottom: 1px solid #eee;
  margin-top: 2px;
  width: 230px;
  height: 25px;
}
.searchButton {
  width: 60px;
  height: 33px;
  line-height: 33px;
  background: inherit;
  background-color: #e29153;
  border: none;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 16px;
  color: #fff;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 18.5px;
}
.items-list {
  background-color: #fff;
  margin-top: 105px;
  margin-bottom: 35px;
}
.items-list li {
  height: 42px;
  line-height: 42px;
  padding: 0 30px 0 36px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #cdcdcd;
}
.items-list .img {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 14px;
  height: 14px;
  background: url(../../assets/images/checkImg.png) no-repeat;
  background-size: 14px auto;
}

.items-list .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}
.checkIcon {
  position: absolute;
  right: 10px;
  width: 18px;
  height: 18px;
  background: url(../../assets/images/checked.png) no-repeat;
  background-position: 0 0;
  background-size: 36px auto;
  top: 12px;
}
.checkIcon.active {
  background-position: -18px 0;
}
.premises-checkBox {
  position: absolute;
  right: 10px;
  width: 18px;
  height: 18px;
  top: 12px;
  -webkit-appearance: checkbox;
}
.premises-bottom {
  position: fixed;
  bottom: 0px;
  padding-left: 20px;
  height: 35px;
  display: flex;
  align-items: center;
  background-color: #fff;
  left: 0;
  right: 0;
  border-top: 1px solid rgb(233, 231, 231);
}
.bottom-premises-checkbox {
  width: 14px;
  height: 14px;
  -webkit-appearance: checkbox;
}
</style>